<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <script>
        // spread 扩展运算符
        // 扩展运算符（spread）是三个点（...）
        // 它好比rest参数（剩余参数）的逆运算
        // 作用：将一个数组转为用逗号分隔的参数序列

        // 注意：它不会改变原数组

        const arr = [1, 2, 3, 4, 5]
        console.log(...arr) // 1, 2, 3, 4, 5   浏览器上没有显示逗号，假装有

        // 主要应用：
        // 1. 求一个数组的最大最小值
        const arr2 = [69, 5, 835, 62, 4, 30]
        // Math.max()  它本身接收的是参数列表
        console.log(Math.max(...arr2))
        console.log(Math.min(...arr2))

        // 2. 赋值/拷贝数组 (浅拷贝)
        const a1 = [1, 2]
        const a2 = a1
        // 赋值，数组的直接赋值，赋的是地址，指向的是堆内存中同一个数组对象
        a2[0] = 666
        console.log(a1)  // [666, 2]

        /*==================================  start  ====================================*/
        const a3 = [5, 6, 7]
        const a4 = [...a3]
        a3[0] = 999
        console.log(a4) // [5, 6, 7]
        // ==> 数组里面的元素是基本数组类型， 修改数组元素的值，相互不影响

        // 3. 合并数组
        const a5 = ['c', 'd']
        const a6 = ['e', 'f']
        // ES5 的合并 concat
        const resArr = a5.concat(a6)
        console.log(a5)
        // ES6 spread
        const a7 = [...a5, ...a6]
        console.log(a7)

        // 4. 将字符串转为数组
        // [...str] ==> 将字符串展开为数组
        const str = 'hello world'
        const a8 = [...str]
        console.log(a8)
        // 反转字符串
        const res = str.split('').reverse().join('')
        console.log(res)

        // ==> 扩展运算符的方式
        const resStr = [...str].reverse().join('')
        console.log(resStr)

        const str2 = '你好，司法部萨芬卡萨丁罚款扣积分'
        console.log([...str2])

        // 5. 将伪数组转为真数组
        const divs = document.querySelectorAll('div')
        // console.log(divs)
        // divs.push(666)
        const resDiv = [...divs]
        console.log(resDiv)
        resDiv.push(666)
        console.log(resDiv)

        /* ==================== 将伪数组转为真数组 ===================== */
        // 1. [...likeArr] 使用扩展运算符
        // 2. Array.from(likeArr)
        const resReal = Array.from(divs)
        console.log(resReal)


    </script>
</body>

</html>